<!--  -->
<template>
  <div class='annexinfo'>
    <!-- <Header-Comp title="附件信息" /> -->
    <div class="annexinfo_container">
      <div class="annexinfo_img">
        <div class="annexinfo_div annexinfo_fr_just"
             v-if="froshow">
          <span>法人身份证</span>
          {{data.legalName}}
          <p>{{data.legalIdcard}}</p>
        </div>
        <div class="annexinfo_div annexinfo_fr_back"
             v-if="froshow">
        </div>
        <div class="annexinfo_div annexinfo_fr_just"
             v-if="jsoshow">
          <span>结算户身份证</span>
          {{mrcAccount.accountName}}
          <p>{{mrcAccount.accountIdcard}}</p>
        </div>
        <div class="annexinfo_div annexinfo_fr_back"
             v-if="jsoshow">
        </div>
        <div class="annexinfo_div annexinfo_fr_card"
             v-if="Number(data.merchantAccountType) != 1 && cardoshwo">
          {{mrcAccount.accountNo}}
        </div>
        <van-image v-for="(item,index) in data.mrcAccountAttach"
                   v-show="Number(item.fileType) != 1 &&Number(item.fileType) != 2 &&Number(item.fileType) != 5 &&Number(item.fileType) != 6 &&Number(item.fileType) != 7 &&Number(item.fileType) != 20 && Number(item.fileType) !== 21 && Number(item.fileType) !== 22"
                   :key="index"
                   :src="item.watermarkImg"
                   @click="sceneImg(item.watermarkImg)" />
      </div>
      <van-form 
        v-show="data.acquiringPeople || data.acquiringManager || data.acquiringRemarks"
        input-align="right" >
        <div class="otherText">
          其他
        </div>
        <van-field
          v-model="data.acquiringPeople"
          label="推荐人"
        />
        <van-field
          v-model="data.acquiringManager"
          label="推荐经理"
        />
        <van-field
          v-model="data.acquiringRemarks"
          label="备注"
        />
      </van-form>
    </div>

  </div>
</template> 
<script> 
import { ImagePreview } from 'vant';
import { bankCard, cardSecret, phoneFilter } from "@/utils/utils.js";
export default {

  components: {
    HeaderComp: () => import('@/components/HeaderComp')
  },
  data () {
    //这里存放数据
    return {
      data: {},
      mrcAccount: {},
      froshow: false,
      jsoshow: false,
      cardoshwo: false
    };
  },
  created () {
    var data = {
      id: this.$route.query.id,
      type: this.$route.query.type
    }
    this.$store
      .dispatch("Getmrcdetail", data).then(res => {
        this.data = res
        this.data.legalIdcard = cardSecret(this.data.legalIdcard)
        this.mrcAccount = this.data.mrcAccount
        this.mrcAccount.accountIdcard = cardSecret(this.mrcAccount.accountIdcard)
        this.mrcAccount.accountNo = bankCard(this.mrcAccount.accountNo)
        console.log(this.data, 'this.data---', this.data.mrcAccountAttach)
        this.data.mrcAccountAttach.map(v => {
          if (Number(v.fileType) == 1) {
            this.froshow = false
          } else {
            this.froshow = true
          }
          if (Number(v.fileType) == 5) {
            this.jsoshow = false
          } else {
            this.jsoshow = true
          }
          if (Number(v.fileType) == 6) {
            this.cardoshwo = false
          } else {
            this.cardoshwo = true
          }
        })
      })
  },
  //方法集合
  methods: {
    // 图片预览
    sceneImg (images) {
      ImagePreview({
        images: [images], //需要预览的图片 URL 数组
        showIndex: false, //是否显示页码
        loop: false, //是否开启循环播放 
      })
    },
  }
}
</script>
<style lang='less' scoped>
.annexinfo {
  border-top: 1px solid #d7d7d7;
  padding-top: 26px;
  background-color: #f7f7f7;
  .otherText{
    padding: 10px 20px;
  }
  .annexinfo_container {
    .annexinfo_img {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px auto;
      overflow: hidden;
      .annexinfo_div {
        width: 45%;
        margin-left: 3.33%;
        margin-top: 3.33%;
        height: 200px;
        position: relative;
      }
      span {
        font-size: 20px;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        height: 28px;
        border-radius: 2px 2px 8px 8px;
        background-image: linear-gradient(to right, #ffb72f, #ffb72f);
        box-shadow: 0px 6px 3px #ffb72f;
        padding: 0 10px;
      }
      .annexinfo_fr_just {
        background: url('../../assets/img/just.png') no-repeat;
        background-size: 100%;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
        padding-top: 50px;
        padding-left: 120px;
        line-height: 40px;
      }
      .annexinfo_fr_back {
        background: url('../../assets/img/back.png') no-repeat;
        background-size: 100%;
      }
      .annexinfo_fr_card {
        background: url('../../assets/img/card-bj.png') no-repeat;
        background-size: 100%;
        padding-top: 100px;
        padding-left: 28px;
      }
      /deep/ .van-image {
        width: 45%;
        margin-left: 3.33%;
        margin-top: 3.33%;
        height: 200px;
        background: #191919;
        overflow: hidden;
        img {
          width: auto;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>